<template>
  <div class="wallpaper">
    <Laucher />

    <Window :key="item.appId" v-for="item in apps" title="test" :app="item" :visible="item.open">
      <compoennt :is="item.compName"></compoennt>
    </Window>

    <Docker></Docker>
  </div>
</template>

<script>

import Docker from '../components/dock/Dock.vue'
import Laucher from '../components/laucher/Laucher.vue'
import Window from '../components/window/Window.vue'
import vscode from './apps/Vscode.vue'
import safari from './apps/safari.vue'
import facetime from './apps/facetime.vue'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'Desktop',
  data() {
    return {
      visible: false,
    }
  },
  computed: {
    ...mapState(['apps'])
  },
  components: {


    Docker,
    Laucher,
    Window,
    facetime,
    safari,
    vscode
  },

  methods: {
    ...mapActions(['openApp'])
  },

}
</script>

<style lang="less" scoped>
.wallpaper {
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-position: 50%;
  background-image: url(../assets/Monterey.jpeg);
}
</style>